<template>
  <div v-if="JSON.stringify(post_data) != '{}'">
    <div class="particulars">
      <!-- 头部 -->
      <div class="particulars_top">
        <div class="go_back" @click="go_back">
          <span class="iconfont icon-zuo"></span>
          <em>move</em>
        </div>
        <div
          @click="user_follows"
          class="attention"
          :class="{
           is_attention:has_follow
        }"
        >{{has_follow?'已关注':'关注'}}</div>
      </div>
      <!-- 头部 -->

      <!-- 内容 -->
      <div class="particulars_content" v-html="post_data.content"></div>
      <!-- 内容 -->

      <!-- 分享 -->
      <div class="particulars_like">
        <div class="like" :class="{
            is_like:has_like
        }" @click="post_like">
          <span class="iconfont icon-follow"></span>
          {{(post_data.like_length || 0) +( has_like?1:0 ) }}
        </div>
        <div class="share">
          <span class="iconfont icon-youjian"></span>
          分享
        </div>
      </div>
      <!-- 分享 -->
      <!-- 评论 -->
      <div class="comment">
        <h2>Comment</h2>
        <p>
          <i>热门</i>/
          <i>最新</i>
        </p>
        <comment
          v-for="(item,index) of comment_list"
          :key="index"
          :comment_item="item"
          @reply="reply"
        ></comment>
      </div>
      <!-- 评论 -->
    </div>
    <commentInput @input_click="input_click" @comment_blur="comment_blur" :focus="focus"></commentInput>
  </div>
</template>

<script>
import comment from "../components/comment/comment";
import commentInput from "../components/comment/commentInput";
import LoginVue from "./Login.vue";
export default {
  data() {
    return {
      post_data: {},
      has_follow: false,
      has_like: false,
      comment_list: [],
      reply_id: "",
      focus: true
    };
  },
  methods: {
    //   文章详情
    get_post() {
      this.$axios({
        method: "get",
        url: "/post/" + this.$route.query.id
      }).then(res => {
        const { data } = res.data;
        this.post_data = data;
        this.has_follow = data.has_follow;
        this.has_like = data.has_like;
      });
    },
    // ? 关注
    user_follows() {
      const id = this.post_data.user.id;
      const is_follow = !this.has_follow ? "/user_follows/" : "/user_unfollow/";
      this.$axios({
        method: "get",
        url: is_follow + id
      }).then(res => {
        const { message } = res.data;
        this.has_follow = !this.has_follow;
        this.$toast.success(message);
      });
    },
    // ? 点赞
    post_like() {
      const id = this.$route.query.id;
      this.$axios({
        method: "get",
        url: "/post_like/" + id
      }).then(res => {
        const { message } = res.data;
        this.$toast(message);
        this.has_like = !this.has_like;
      });
    },
    // 返回
    go_back() {
      this.$router.back();
    },
    // 评论列表
    get_comment() {
      const id = this.$route.query.id;
      this.$axios({
        method: "get",
        url: "/post_comment/" + id
      }).then(res => {
        const { data } = res.data;
        if (data.length >= 3) {
          data.length = 3;
          console.log("改变");
        }
        console.log("data: ", data);

        this.comment_list = data;
      });
    },
    // ! 回复
    reply(id) {
      this.reply_id = id;
      console.log('id: ', id);
      this.focus = !this.focus;
    },
    // ! 输入框click
    input_click(value) {
      // console.log(' this.reply_id: ',  this.reply_id);
      const id = this.$route.query.id;
      this.$axios({
        method: "post",
        url: "/post_comment/" + id,
        data: {
          content: value,
          parent_id: this.reply_id
        }
      }).then(res => {
        this.get_comment();
      });
    },
    // !输入框blur
    comment_blur() {
      console.log("失去");

      this.reply_id = 0;
    }
  },
  mounted() {
    this.get_post();
    this.get_comment();
  },
  components: {
    comment,
    commentInput
  }
};
</script>

<style lang="less" scoped>
.particulars {
  margin-bottom: 33.333vw;
  .particulars_top {
    background-color: #31c37b;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4.167vw;
    .go_back {
      font-size: 5.556vw;
      .icon-zuo {
        font-weight: 700;
      }
      em {
        color: white;
        padding-left: 2.778vw;
      }
    }
    .attention {
      width: 13.889vw;
      height: 6.944vw;
      line-height: 6.944vw;
      border-radius: 3.472vw;
      text-align: center;
      border: 0.556vw dashed #4fc08d;
      background-color: white;
      color: #31c37b;
      font-weight: 700;
    }
    .is_attention {
      color: white;
      background-color: transparent;
      border: 0.556vw solid transparent;
    }
  }
  .particulars_content {
    padding: 0 2.778vw;
  }
  .particulars_like {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding-top: 30px;
    .like,
    .share {
      width: 25vw;
      height: 11.111vw;
      border-radius: 5.556vw;
      border: 2px solid #666;
      display: flex;
      align-items: center;
      justify-content: center;
      span {
        padding-right: 10px;
      }
    }
    .is_like {
      border: 2px dashed #31c37b;
      color: #31c37b;
      font-weight: 700;
    }
  }
  .comment {
    padding-top: 4.167vw;
    margin-top: 8.333vw;
    border-top: #31c37b 1.389vw dashed;
    h2 {
      text-align: center;
      font-size: 12.778vw;
      color: #31c37b;
    }
    p {
      display: flex;
      align-items: center;
      justify-content: center;
      i {
        padding: 0 2.778vw;
      }
    }
  }
}
</style>